<template>
  <el-row :gutter="10">
    <el-col :span="8" >
      <el-select v-model="search_key" placeholder="请选择" @change="handleInput" >
        <el-option v-for="item in selectOptions" :label="item.label" :value="item.value" :key="item.value" />
      </el-select>
    </el-col>
    <el-col :span="16" >
      <el-input style="width:100%" v-model="search_value" v-on:input="handleInput" />
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    options: {type:Array,default:() =>[]}
  },
  watch: {
    options: {
      handler() {
        this.initOptions();
      },
      immediate: true
    }, 
  },
  data() {
    return {
      search_key: "",
      search_value: "",
      keyword_options: this.$store.state.config.keyword_options,
      selectOptions: []
    }
  },
  methods: {
    handleInput() {
      let keyword = {};
      keyword.key = this.search_key;
      keyword.value = this.search_value;
      this.$emit("update:value", keyword);
    },
    initOptions() {
      let newOptions = [];
      this.options.forEach((item) => {
        const data = this.keyword_options.filter( i => i.value === item );
        newOptions = [...newOptions, ...data];
      })
      this.selectOptions = newOptions;
    }
  }
}
</script>

<style lang="less" scoped>

</style>